<template>
  <el-upload :auto-upload="false" :show-file-list="false" action="" @change="HandleChange">
    <template #trigger>
      <div class="relative w-[100px] h-[100px]">
        <n-avatar round :src="avatarUrl" :size="100" class="cursor-pointer absolute top-0 left-0" />
        <div class="uploadMask iconfont icon-zhaoxiangji"></div>
      </div>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { NAvatar } from "naive-ui";
import { UploadFile } from "@/utils/common";

const emit = defineEmits<{
  (e: "done", result: string): void;
}>();

const props = withDefaults(
  defineProps<{
    src: string;
  }>(),
  {
    src: "",
  },
);

let avatarUrl = ref(props.src);
async function HandleChange(file: any) {
  await UploadFile(file.raw, (result) => {
    if (!result) return;
    ElMessage.success("上传成功");
    avatarUrl.value = result;
    emit("done", result);
  });
}
</script>

<style lang="scss" scoped>
.uploadMask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  right: 0px;
  display: flex;
  background-color: rgb(0, 0, 0, 0.4);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: white;
  font-size: 26px;
}
</style>
